import { buildRouteTree, generateMenu } from '@/permission/generateRoutes';
import { removeAccessToken } from '@/utils/storage';
import { createSlice } from '@reduxjs/toolkit';
import { cloneDeep } from 'lodash-es';
import { ExtendedMenuItem, RouteConfig } from '@/types';

import { UserData } from '@/types/api/user.ts';

const initialState: {
  collapsed: boolean;
  userInfo: UserData;
  rawRoutes: RouteConfig[]; // 若有 Route 类型，建议替换 any[] 为 RouteConfig[]（参考 index.ts 的 RouteConfig）
  roles: string[]; // 角色通常是字符串数组，建议替换 any[] 为 string[]
  routes: RouteConfig[]; // 同理，建议替换为 RouteConfig[]
  menus: ExtendedMenuItem[]; // ✅ 用扩展后的菜单类型，匹配 generateMenu 返回值
  tagsView: { pathname: string; title: string }[]; // 明确 tagsView 类型（避免 any）
  layoutMode: string;
} = {
  collapsed: false,
  userInfo: {
    avatar: '',
    userId: '',
    userName: '',
    nickName: '',
    status: '',
  },
  rawRoutes: [],
  roles: [],
  routes: [],
  menus: [],
  tagsView: [],
  layoutMode: 'side', // 默认左侧菜单模式
};

const appSlice = createSlice({
  name: 'app',
  initialState,
  reducers: {
    setCollapsed: (state, action) => {
      state.collapsed = action.payload;
    },
    setRoutes: (state, action) => {
      const routes = cloneDeep(action.payload);
      const menus = cloneDeep(action.payload);
      state.rawRoutes = action.payload;
      state.menus = generateMenu(menus);
      state.routes = buildRouteTree(routes);
    },
    setUserInfo: (state, action) => {
      state.userInfo = action.payload;
    },
    setRoles: (state, action) => {
      state.roles = action.payload;
    },
    logout: state => {
      removeAccessToken();
      state.userInfo = {
        avatar: '',
        userId: '',
        userName: '',
        nickName: '',
        status: '',
      };
      state.roles = [];
      state.routes = [];
      state.menus = [];
      state.tagsView = [];
    },
    setTagsView: (state, action) => {
      const { pathname, title } = action.payload;
      const isExist = state.tagsView.some(item => item.pathname === pathname);
      if (!isExist) {
        state.tagsView.push({ pathname, title });
      }
    },
    removeTagView: (state, action) => {
      const pathname = action.payload;
      state.tagsView = state.tagsView.filter(item => item.pathname !== pathname);
    },
    setLayoutMode: (state, action) => {
      state.layoutMode = action.payload;
    },
  },
});

export const {
  setUserInfo,
  setRoles,
  logout,
  setRoutes,
  setCollapsed,
  setTagsView,
  removeTagView,
  setLayoutMode,
} = appSlice.actions;
export default appSlice.reducer;
